<template>
  <div>
    <div class="content">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: {}
    }
  },
  methods: {
    // 加载地图
    getMap() {
      const map = new AMap.Map('container', {
        zoom: 8, // 级别
        center: [116.397428, 39.90923], // 中心点坐标
      })
      AMap.plugin([
          'AMap.ToolBar',
          'AMap.Scale'
      ], function(){
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar())

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale())
      });
      this.map = map
    }
  },
  mounted() {
    this.getMap()
  }
}
</script>

<style scoped>
.content {
  padding: 0 10px;
}
#container {
  width: 100%;
  height: 80vh;
}
</style>